<template>
  <div>
    <!-- 搜索部分开始 -->
    <div class="search-box">
      <form action="" id="form-host-search">
        <div class="search-content">
          <div class="search-select">
            <span>典礼日期</span>
            <el-date-picker
              v-model="value1"
              @change="changeDate"
              type="date"
              placeholder=""
              class="show"
            >
            </el-date-picker>
            <!-- <input type="text" class="SearchInput" /> -->
          </div>
          <div class="search-select">
            <span>时段</span>
            <input type="text" class="SearchInput" :disabled="flag" />
          </div>
          <div class="search-select">
            <span>仪式风格</span>
            <select name="hostStyle" id="" class="SearchInput1">
              <option value="">请选择</option>
              <option value="1">西式婚礼</option>
              <option value="2">中式婚礼</option>
              <option value="3">汉唐婚礼</option>
              <option value="4">商务主持</option>
              <option value="5">宴会支持</option>
            </select>
          </div>
          <div class="select-btn">搜索主持人</div>
        </div>
      </form>
    </div>
    <!-- 表格开始 -->
    <div id="lefttable" class="divfish" style="">
      <div
        class="recommend"
        style="width: 146px; height: 42px; background: #c4b4a8"
      >
        <div
          class="recommend-left"
          style="width: 5px; height: 20px; background: RGB(255, 255, 255)"
        ></div>
        <div class="recommend-right" style="color: white; font-weight: bold">
          排行榜
        </div>
      </div>
      <table
        width="100%"
        border="0"
        id="oedertable"
        cellpadding="0"
        cellspacing="0"
      >
        <tbody>
          <tr>
            <th>排行</th>
            <th>主持人</th>
            <th>订单量</th>
          </tr>
          <tr v-for="item in tableList" :key="item.id">
            <td>{{ item.list }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.num }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "SearchBox",
  data() {
    return {
      tableList: [],
      value1: "",
      flag: true,
    };
  },
  methods: {
    changeDate() {
      this.flag = false;
    },
  },
  mounted() {
    api.list().then((res) => {
      // console.log(res.data);
      this.tableList = res.data.list;
    });
  },
};
</script>

<style scoped>
.search-box {
  margin: 0 auto;
  height: 70px;
  background-color: #efefef;
}
#form-host-search {
  background-color: #c4b4a8;
}
.search-content {
  width: 1260px;
  height: 70px;
  line-height: 70px;
  margin: 0 auto;
  overflow: hidden;
  margin: 20px auto 20px auto;
  position: relative;
}
.search-select {
  float: left;
  margin-right: 20px;
  z-index: 99999;
}
.show{
  z-index: 99999;
}
.SearchInput {
  padding: 15px;
  outline: none;
  width: 200px;
  height: 15px;
  margin-left: 10px;
  border: none;
}
.select-btn {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 200px;
  background-color: #ccbbae;
  border-radius: 10px;
  color: white;
  cursor: pointer;
}

.SearchInput1 {
  width: 250px;
  padding: 13px;
  margin-top: 10px;
  font-size: 16px;
  outline: none;
  margin-left: 10px;
}
.divfish {
  background-color: #c4b4a8;
  color: #ffffff;
  overflow: hidden;
  z-index: 9999;
  padding: 5px;
  text-align: center;
  width: 150px;
  height: 400px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-right: 10px;
  position: absolute;
  top: 576px;
  left: 30px;
}
.recommend {
  width: 175px;
  height: 46px;
  background: rgba(250, 244, 232, 1);
  border: 1px solid #fff;
  border-radius: 3px;
  margin-bottom: 20px;
}
.recommend-left {
  width: 9px;
  height: 22px;
  background: rgba(194, 143, 71, 1);
  border-radius: 4px;
  margin: 13px 0 0 17px;
  float: left;
}
.recommend-right {
  width: 80px;
  height: 19px;
  font-size: 20px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(194, 143, 71, 1);
  float: left;
  margin: 10px 0 0 14px;
}
table td {
  height: 30px;
  border: #cccccc 1px solid;
}
</style>